<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 
            生命(生 -> 死):
                创建，销毁结束;
            周期:
            组件也有自己的生命周期:
                创建过程;
                    创建前(beforeCreate)
                        vue实例还没有被创建，data里面的数据不可被调用;
                        也就是this.数据名 无效,页面仍然处于最原始的状态
                    创建后(created)
                        vue实例已经被创建，这个钩子函数是第一个能够访问到
                        data数据的钩子函数;页面仍然是最原始的状态，
                        虚拟dom还没有开始生成;
                挂载过程;
                    挂载前(beforeMount)
                        虚拟dom已经生成，但是还没有渲染到页面上，
                        但是这个钩子函数，做任何的dom操作，都不奏效;
                        因为，在这个钩子函数里面删除的所有的dom，
                        都已经被虚拟dom拷贝了一份，
                    挂载后(mounted)
                        所有的dom都已经渲染到了页面上，dom是最新的;
                        页面也是最新的; 组件的初始化已经完成了
                更新过程;
                    更新前(beforeUpdate)
                        页面更新前，数据是最新的，但是页面还是旧数据;
                    更新后(updated)
                        页面的是最新的，数据也是最新的;
                销毁过程;
                    销毁前(beforeDestroy)
                        实例销毁前都会触发的事件;
                    销毁后(destroyed)
                        这个生命周期是最后一次，能够调用事件以及data里面数据的钩子函数
                        销毁后，页面的所有操作，都不在生效;
                        页面还在;
                        一般在这个生命周期，做一些，停止计时器，清空内存等操作;
                称为 组件的四大生命周期;

                八小份生命周期 都有自己的钩子(vue对象里面的函数)函数;
         -->
         <button @click="number = 456">
            按钮
         </button>
        {{ number }}

        <button @click="kill()">
            销毁vue实例
        </button>
    </div>
    <script src="./vue.js"></script>
    <script>

        // 实例化
        const vm = new Vue({
            // 挂载dom
            el: '#app',
            methods: {
                kill(){
                    // 销毁生命周期
                    vm.$destroy()
                }
            },
            data() {
                return {
                    number: 123
                }
            },
            // 创建前的生命周期
            beforeCreate() {
                console.log(this.number);
                // 前端代码断点调试
                debugger
            },
            // 创建后的生命周期
            created() {
                // 一般做些数据的请求操作，页面刚开始加载的时候
                // 需要的数据
                console.log(this.number);
                debugger
            },
            // 挂载前的生命周期
            beforeMount() {
                document.querySelector('button').remove();
                debugger
            },
            // 挂载后的生命周期
            mounted() {
                // 一般做一些，页面加载后需要进行的dom操作;
                // vue一般不提倡直接控制dom
                debugger
            },
            // 更新前
            beforeUpdate() {
                console.log(this.number);
                debugger
            },
            // 更新后
            updated() {
                debugger
            },
            // 销毁前
            beforeDestroy() {
                debugger
            },
            // 销毁后
            destroyed() {
                debugger
            },
        })
    </script>
</body>

</html>